<template>
  <el-container>
    <el-aside el-aside :width="isCollapse? '65px': '190px'">
      <div class="top-button" @click="toggleCollapse">
        <i class="el-icon-s-operation"></i>
      </div>
      <el-menu
          background-color="#545c64"
          text-color="#fff"
          :collapse=isCollapse
          :collapse-transition="false"
          :router="true"
          :default-active="this.$route.path"
          active-text-color="#ffd04b">

        <el-submenu :index=item.id v-for="item in menuList" :key="item.id">
          <template slot="title">
            <i :class="iconsObj[item.id]"></i>
            <span>{{item.lname}}</span>
          </template>
          <el-menu-item v-for="item1 in item.children" :index="item1.path" :key="item1.id">
            <span slot="title">{{item1.cname}}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <el-header>
        <el-input
            placeholder="请输入内容"
            v-model="search"
            >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-tag type="info" style="cursor: pointer">{{menuList[0].lname}}</el-tag>
      </el-header>
      <el-main>
        <el-divider></el-divider>
        <router-view></router-view>
      </el-main>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        menuList: [{lname:"医院设置管理",id:"1",
          children:[{cname:"医院设置列表",path:"/list_hs",id: 1-1},{cname:"医院设置添加",path:"/add",id: 1-2},
            {cname: "医院列表",path:"/list_h",id: 1-3}]},
          {lname:"医院数据管理",id:"2",children: [{cname: "数据字典列表",path:"/dict",id: 2-1}]}],
        iconsObj: {
          '1':'el-icon-s-order',
          '2':'el-icon-more'
        },
        //是否折叠
        isCollapse: false,
        activePath: '',
        search: ''
      }
    },
    methods: {
      toggleCollapse() {
        this.isCollapse=!this.isCollapse
      },
      returntoView(path){
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="less" scoped>
  .top-button{
    background-color: gray;
    display: flex;
    justify-content: center;
  }
  .el-tag{
    margin-top: 12px;
    margin-right: 10px;
  }
  .el-aside {
    height: 730px;
    .el-menu {
      border-right: none;
    }
  }

</style>